<template>
  <!-- 新增字段之前, 优先搜索固定字段 -->
  <a-modal
    title="新增字段"
    :visible="visible"
    :width="700"
    @ok="handleOk"
    @cancel="visible = false"
    :maskClosable="false"
    :afterClose="handleAfterClose"
  >
    <a-alert style="margin-bottom: 12px" message="建议尽量使用系统字段，系统字段可关联补充用户资料哦~" banner />
    <a-input-search v-model="searchValue" style="margin-bottom: 20px;" placeholder="输入字段名称搜索" />
    <div class="keys-modal__content">
      <template v-for="item in treeData">
        <div v-if="searchValue" class="keys-group" :key="item.id">
          <template v-for="cItem in item.children">
            <div v-if="hasShowTitle(cItem)" class="group-item" :key="cItem.id">
              <div class="group-item__title">{{ cItem.name }}</div>
              <div class="group-item__list">
                <template v-for="v in cItem.children">
                  <div
                    v-if="v.name && v.name.indexOf(searchValue) > -1"
                    style="margin-bottom: 16px; width: 150px"
                    :key="v.id"
                  >
                    <a-checkbox
                      :value="v.id"
                      :disabled="v.disabled"
                      :checked="v.disabled || cItem.checkedIds.includes(v.id)"
                      @change="onCheckChange($event, cItem, v)"
                    >
                      <span>{{ v.name.substr(0, v.name.indexOf(searchValue)) }}</span>
                      <span style="color: #f50">{{ searchValue }}</span>
                      <span>{{ v.name.substr(v.name.indexOf(searchValue) + searchValue.length) }}</span>
                    </a-checkbox>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>
      </template>
      <p class="tips">没有找到想要的字段？<span @click="toAddCustomField">创建自定义字段</span> </p>
    </div>
  </a-modal>
</template>

<script>
import { uniq } from 'lodash-es'

export default {
  components: {},
  props: {
    // 字段库列表
    fieldLibraryList: {
      type: Array,
      required: true,
      default: () => []
    },
    /** 字段已选列表 */
    checkedKeys: {
      type: Array,
      required: true,
      default: () => []
    },
    //禁用集合
    disabledKeys: {
      type: Array,
      required: true,
      default: () => []
    },
    stageIndex: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      visible: false,
      searchValue: '',
      tempData: null,
      treeData: [],
      loaclCheckedItem: []
    }
  },
  methods: {
    hasShowTitle(item) {
      return item.children.find(v => v.name && v.name.indexOf(this.searchValue) > -1)
    },
    getTreeData(data) {
      return data.map(item => {
        const children = item.children || []
        const cIds = children.map(v => v.id)

        const intersect = this.checkedKeys.filter(function(v) {
          return cIds.indexOf(v) > -1
        })

        const disabled =
          children && children.length
            ? this.isInclude(this.disabledKeys, children)
            : this.disabledKeys.includes(item.id) || (item.itemType === 'ApplyTable' && this.stageIndex === 0)
        return {
          ...item,
          label: item.name,
          value: item.id,
          disabled: disabled || this.checkedKeys.includes(item.id),
          checkedIds: intersect || [],
          children: this.getTreeData(children)
        }
      })
    },
    onCheckChange(e, parent, item) {
      const { checked } = e.target
      if (checked) {
        this.loaclCheckedItem.push(item)
        parent.checkedIds.push(item.id)
      } else {
        this.loaclCheckedItem = this.loaclCheckedItem.filter(v => v.id !== item.id)
        parent.checkedIds = parent.checkedIds.filter(v => v !== item.id)
      }
    },
    isInclude(arr1, arr2) {
      if (!arr2.length) return false
      return arr2.every(val => arr1.includes(val.id))
    },
    show(obj) {
      this.tempData = obj
      this.treeData = this.getTreeData(this.fieldLibraryList)
      this.visible = true
    },
    handleOk() {
      const checkedIds = []
      this.loaclCheckedItem.forEach(v => {
        checkedIds.push(v.id)
        this.$nextTick(() => {
          this.checkField(v, true)
        })
      })
      this.$emit('setCheckedKeys', uniq([...this.checkedKeys, ...checkedIds]))
      this.visible = false
    },
    checkField(data, checked) {
      let module = this.treeData.find(f => f.moduleType === data.moduleType)

      if (data.moduleType === 3) {
        if (data.parentId === 0) {
          data.children.forEach(item => {
            this.$emit('checkField', item, checked, item)
          })
        } else {
          this.$emit('checkField', data, checked, module)
        }
      } else {
        this.$emit('checkField', data, checked, module)
      }
    },
    handleAfterClose() {
      this.searchValue = ''
    },
    toAddCustomField() {
      this.visible = false
      this.$emit('addCustomField', this.tempData)
    }
  },
  created() {}
}
</script>

<style lang="less" scoped>
.keys-modal__content {
  min-height: 400px;
  .tips {
    font-size: 14px;
    color: #4E5969;
    padding: 16px 0;
    text-align: center;
    margin: 0;
    span {
      color: #165DFF;
      cursor: pointer;
    }
  }
}
.keys-group {
  .group-item {
    &__title {
      font-size: 16px;
      color: #86909c;
    }
    &__list {
      margin-left: 20px;
      display: flex;
      flex-wrap: wrap;
      margin-top: 12px;
    }
  }
}
</style>
